<template>
  <div>
    <p>pageRoute: #/GetComponentInstance</p>
    <br />
    <div>
      <p>组件层次结构说明</p>
      <pre>
A节点 --》 B, C, D 节点

C节点 --》 E，F节点

D节点 --》 G，H，I节点
    </pre
      >
    </div>
    <ChildrenA />
    <br />
    <!-- -->
    <div>
      知识点：
      <pre>
1，仔细阅读第二篇文章
2，vue-ref的优点
除了使用上的优点外，被注册的组件实例如果有更新，会让根组件缓存中对应的实例也进行实时的更新。

vue-ref: https://www.npmjs.com/package/vue-ref

Property |	Description	        |      Type
v-ref	   | a callback function	| function(dom | vnode, key)
vue-ref注意点：在这个回调函数中，您不应该更改任何反应数据，否则渲染将进入一个无限循环。
      </pre>
    </div>
    <a href="https://juejin.cn/post/6844903933358374925" target="__blank"
      >----【Vue进阶】 —（你未必知道）如何优雅获取跨层级组件实例（拒绝递归） </a
    ><br />
    <a
      href="https://blog.csdn.net/pagnzong/article/details/113471690"
      target="__blank"
      >----11-使用vue-ref插件实现跨级获取组件实例
    </a>
  </div>
</template>
<script>
import ChildrenA from './childs_A'
export default {
  components: {
    ChildrenA
  }
}
</script>
<style>
.border,
.border1,
.border2 {
  border: 1px solid #000;
  padding: 10px 0;
  margin: 10px 10px 0;
}
.border1 {
  border-color: #ccc;
}
.border2 {
  border-color: #eee;
}
</style>
